<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>transition过渡/transform变形/animation关键帧动画</title>
</head>
<!-- 1. 在 CSS3 中创建动画, 您需要学习 @keyframes 规则 。
		    2. @keyframes 规则用于创建动画 。 在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果 。
		    3. 必须定义动画的名称和时长 。 如果忽略时长, 则动画不会允许, 因为默认值是 0。
		    4. 请用百分比来规定变化发生的时间, 或用关键词 “from” 和 “to”, 等同于 0% 和 100% 。
		 
		 5. 语法
		       1. animation: name duration timing-function delay iteration-count direction;
		       1. animation-name 规定需要绑定到选择器的 keyframe 名称
		       2. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
		       3. animation-timing-function 规定动画的速度曲线。 默认是 “ease”。
		       4. animation-delay 规定动画何时开始 。 默认是 0。
		       5. animation-iteration-count 规定动画被播放的次数 。 默认是 1。
		       6. animation-direction 规定动画是否在下一周期逆向地播放 。 默认是 “normal”; alternate (轮流),。
		 
		 alternate (轮流): 动画播放在第偶数次向前播放, 第奇数次向反方向播放 (animation-iteration-count 取值大于1时设置有效
		    2. 语法: animation-direction: alternate;
		 
		 animation-play-state 规定动画是否正在运行或暂停 。 默认是 “running” 播放; paused 暂停播放 。
		    1. 语法: animation-play-state: paused;
		 
		 animation-fill-mode 属性规定动画在播放之前或之后, 其动画效果是否可见; 规定对象动画时间之外的状态; none | forwards | backwards | both 。
		    1. none: 不改变默认行为 (默认, 回到动画没开始时的状态) 。
		    2. forwards: 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义) (动画结束后动画停留在结束状态) 。
		    3. backwards: 在 animation-delay 所指定的一段时间内, 在动画显示之前, 应用开始属性值 (在第一个关键帧中定义) （动画回到第一帧的状态）。
		    4. both: 向前和向后填充模式都被应用 （根据 animation-direction 轮流应用 forwards 和 backwords 规则）。
		    5. 语法: animation-fill-mode: forwards
		       1. 0% 是动画的开始, 100% 是动画的完成。 -->
<style>
  .w_publuc-style {
    margin-bottom: 30px;
    border: 3px solid #ccc;
  }
  /* transition 过渡 */
  .w_transition {
    width: 200px;
    height: 200px;
    background-color: wheat;
    color: #333;

    transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;
	 /* Firefox 4 */
    /* -moz-transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s; */
	/* Safari and Chrome */
    /* -webkit-transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s; */
	/* Opera */
    /* -o-transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;  */
  }
  .w_transition:hover {
    background: yellow;
    width: 300px;
    color: blueviolet;
  }
  /* transform 变形 */
  .w_transform {
    margin:30px;
    width:200px;
    height:100px;
    background-color:yellow;

    /* Rotate div */
    transform:rotate(9deg);
	 /* Internet Explorer */
    /* -ms-transform:rotate(9deg); */
	 /* Firefox */
    /* -moz-transform:rotate(9deg); */
	/* Safari 和 Chrome */
    /* -webkit-transform:rotate(9deg); */
	 /* Opera */
    /* -o-transform:rotate(9deg); */
  }

  /* animation 关键帧动画 */
  .w_animation {
    width: 200px;
    height: 200px;
    background: red;
    animation: myfirst 2s ease 0.5s infinite alternate;

    /* Firefox */
    /* -moz-animation:myfirst 2s ease 0.5s infinite alternate; */
    /* Safari and Chrome */
    /* -webkit-animation:myfirst 2s ease 0.5s infinite alternate; */
    /* Opera */
    /* -o-animation:myfirst 2s ease 0.5s infinite alternate; */
  }
  @keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* Firefox */
  /* @-moz-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  } */
  /* Safari and Chrome */
  /* @-webkit-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  } */
  /* Opera */
  /* @-o-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  } */
</style>
<body>
  <div class="w_transition w_publuc-style">transition 过渡</div>
  <div class="w_transform w_publuc-style">transform 变形</div>
  <div class="w_animation w_publuc-style">animation 关键帧动画</div>
</body>
</html>
